import { allAreaList, allCityList, allProvinceList, initPageType, usePageChange } from '@hs-admin/utils'
import './homeStyle.css'
import { Button, Checkbox, Input, Select, Tag, Typography } from 'antd'
import { useCallback, useEffect, useState } from 'react'
import cardRightTop from '/static/img/park/relation.png'
import emptyParkImg from '@/assets/park/emptyParkImg1.png'
import arrowDownImg from '@/assets/park/arrowDown.png'
import { getParkList } from '@/api/park.ts'
import { useNavigate } from 'react-router-dom'
// import { ArrowDown } from '@/views/Park/ArrowDown.tsx'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'

const { Search } = Input

const { Paragraph } = Typography

const allCodeNameMap: Record<string, string> = {}

const allParkTypes = [
  '产业园区',
  '工业园区',
  '经济技术开发区',
  '高新技术产业开发区',
  '其他类型开发区',
  '国家级新区',
  '省级新区',
  '特色小镇',
  '综合保税区',
  '小微企业园园区',
  '大学科技园',
  '临空经济示范区',
  '孵化器'
]

const allParkLevels = ['国家级', '省级', '市级', '区县级', '未公示']

const allCompanyCounts = ['≤100家', '100家~500家', '500家~1000家', '＞1000家']

const levelThreeData = allProvinceList.map((item) => {
  allCodeNameMap[item.value] = item.label
  return {
    title: item.label,
    key: item.value,
    children: (allCityList[item.value as string] ?? []).map((it) => {
      allCodeNameMap[it.value] = it.label
      return {
        title: it.label,
        key: it.value,
        children: (allAreaList[it.value as string] ?? []).map((child) => {
          allCodeNameMap[child.value] = child.label
          return {
            title: child.label,
            key: child.value
          }
        })
      }
    })
  }
})

const initPage: initPageType = {
  current: 1,
  morePageOptions: true,
  pageSize: 10,
  total: 0
}

const getCodesAndAreas = (str: string | undefined) => {
  let allCity: { title: string; key: string; children: { title: string; key: string }[] }[] | undefined
  let allArea: { title: string; key: string }[] | undefined

  if (str) {
    const arr = str.split(',')

    const province = arr[0] ?? ''
    let city = arr[1] ?? ''
    let area = arr[2] ?? ''

    allCity = levelThreeData.find((it) => String(it.key) === province)?.children
    allArea = allCity?.find((it) => it.key === city)?.children
    if (allCity?.length === 1) {
      allArea = allCity[0].children
      allCity = undefined
    }

    if (city && !city.endsWith('00')) {
      area = city
      city = ''
      allCity = undefined
      const tempCity = levelThreeData.find((it) => String(it.key) === province)?.children[0].key
      allArea = levelThreeData.find((it) => String(it.key) === province)?.children.find((it) => it.key === tempCity)?.children
    }

    return {
      province,
      city,
      area,
      allCity,
      allArea
    }
  }
  return {
    province: '',
    city: '',
    area: '',
    allCity,
    allArea
  }
}

const hsIndustrys = [
  {
    name: '高端装备制造',
    children: [
      {
        label: '高端装备制造',
        value: '3f6045f7-dbde-445d-bc87-a738b8245357'
      },
      {
        label: '空天装备',
        value: '0df98665-4a7c-44e0-9c41-05d355da1dcc'
      }
    ]
  },
  {
    name: '汽车',
    children: [
      {
        label: '汽车',
        value: '65422418-368d-43c9-87e3-101ce0481f33'
      },
      {
        label: '新能源汽车',
        value: '16ee5e71-a4a1-4202-ae4e-1b5f9e874ded'
      },
      {
        label: '燃料电池汽车',
        value: '244f502a-159a-4731-b884-3148d636d80'
      }
    ]
  },
  {
    name: '生物医药',
    children: [
      {
        label: '生物医药',
        value: '1b7ee612-cb36-45ea-8c72-e5dc9cacdac0'
      },
      {
        label: '原料药',
        value: 'cc19ca3f-92b8-48e2-b9ac-713902b5674f'
      },
      {
        label: '仿制药',
        value: '01863478-77f5-42aa-9a6b-c21c43d76e8a'
      },
      {
        label: '合成生物',
        value: 'f9b23fc0-2174-4445-962d-27b8e492acc'
      }
    ]
  },
  {
    name: '数字经济',
    children: [
      {
        label: '人工智能',
        value: 'd184e176-d077-487f-973f-82d2507d141e'
      },
      {
        label: '数据服务',
        value: '24a5728f-0241-4637-8ec8-ebff3c96701a'
      },
      {
        label: '集成电路',
        value: '019fe3b3-ddbe-4c1c-a564-afa8d7ff9483'
      },
      {
        label: '智能视觉',
        value: 'da1aa8b7-08ff-44eb-822e-ab5518b9604'
      }
    ]
  },
  {
    name: '新材料',
    children: [
      {
        label: '新材料',
        value: 'a76edf39-8398-4d3c-82b3-0e7f60dcc38f'
      },
      {
        label: '先进有色金属材料',
        value: '45989770-6477-41dd-99c2-51543f9a6dd0'
      },
      {
        label: '第三代半导',
        value: '03219e04-2e5f-4efc-bd45-3c4b269541c'
      }
    ]
  },
  {
    name: '新能源',
    children: [
      {
        label: '新能源',
        value: '7b6c8c83-8bd7-443c-bc08-e570d34bfebf'
      },
      {
        label: '光伏',
        value: '6fc6bb54-7e03-42f8-9a62-60a62d0fafde'
      },
      {
        label: '氢能',
        value: '4005d0cb-3462-4e38-8755-ca3a95c395df'
      },
      {
        label: '新型储能',
        value: 'e5112701-d9d3-4037-ac3f-7ba4116ef427'
      }
    ]
  }
]

const allHsIndustry = hsIndustrys.reduce(
  (
    previousValue: Array<{
      label: string
      value: string
    }>,
    currentValue
  ) => [...previousValue, ...currentValue.children],
  []
)

const ParkHome = () => {
  const [data, setData] = useState<Array<any>>([])

  const navigate = useNavigate()

  const [showAllFilter, setShowAllFilter] = useState(false)

  const [fields, setFields] = useState<{
    cantonCode?: Array<string>
    companyCnt?: string
    hsIndCode?: Array<string>
    keywords?: string
    parkLevel?: string
    parkType?: Array<string>
  }>({
    cantonCode: undefined,
    companyCnt: undefined,
    hsIndCode: undefined,
    keywords: undefined,
    parkLevel: undefined,
    parkType: undefined
  })

  const [more, setMore] = useState({
    province: false,
    city: false,
    area: false,
    parkType: false
  })

  const [activeHsIndustry, setActiveHsIndustry] = useState('')

  const { province, city, area, allCity, allArea } = getCodesAndAreas(fields['cantonCode']?.[0])

  const parentCantonCodeForLevelArea = city ? `${province},${city}` : province

  const nowParkTypes = fields.parkType

  const nowParkLevel = fields.parkLevel

  const nowHsIndustrys = fields.hsIndCode

  const nowCompanyCount = fields.companyCnt

  const doRequest = useCallback(
    async (page: number, pageSize: number) => {
      const res = await getParkList({
        pageNum: page,
        ...fields,
        pageSize: pageSize
      })
      setData(res.list)
      return res.total ?? 0
    },
    [fields]
  )

  const { resetPageAndTriggerRequest, pagination, loading } = usePageChange(initPage, doRequest)

  useEffect(() => {
    resetPageAndTriggerRequest()
  }, [resetPageAndTriggerRequest])

  return (
    <div className="park-wrapper">
      <div className="park-filter-wrapper">
        <div className="filter-title">搜索园区，精准拓客</div>
        <div className="filter-search">
          <Search
            className="w-800px"
            placeholder="请输入园区名称"
            allowClear
            size="large"
            suffix={<img src={'/static/img/park/searchIcon.png'} alt="" style={{ width: '24px', height: '24px' }} />}
            onSearch={(value) => {
              setFields((prevState) => ({
                ...prevState,
                keywords: value || undefined
              }))
            }}
          />
        </div>
        <div className="filter-part">
          <div className="selected-filter-items">
            {(province || city || area || nowParkTypes || nowHsIndustrys?.length || nowParkLevel || nowCompanyCount) && (
              <Button
                type="link"
                className="p-0 h-unset"
                onClick={() => {
                  setFields((prevState) => ({
                    keywords: prevState['keywords']
                  }))
                }}>
                全部清除
              </Button>
            )}
            {/* <span className="choice-title">已选条件:</span> */}
            {/* <div className="more-icon">
              <Button
                type="link"
                onClick={() => {
                  setFields((prevState) => ({
                    keywords: prevState['keywords']
                  }))
                }}>
                全部清除
              </Button>
              <Button
                type="link"
                onClick={() => {
                  setShowAllFilter((prevState) => !prevState)
                }}>
                {showAllFilter ? '收起' : '展开'}筛选
              </Button>
            </div> */}
            {province ? (
              <Tag
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => ({
                    ...prevState,
                    cantonCode: undefined
                  }))
                }}>
                {allCodeNameMap[province]}
              </Tag>
            ) : null}
            {city ? (
              <Tag
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => ({
                    ...prevState,
                    cantonCode: [province]
                  }))
                }}>
                {allCodeNameMap[city]}
              </Tag>
            ) : null}
            {area ? (
              <Tag
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => ({
                    ...prevState,
                    cantonCode: [parentCantonCodeForLevelArea]
                  }))
                }}>
                {allCodeNameMap[area]}
              </Tag>
            ) : null}
            {nowParkTypes?.map((park) => (
              <Tag
                key={park}
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    const parkType = prevState['parkType']?.filter((it) => it !== park) ?? undefined
                    return {
                      ...prevState,
                      parkType: parkType?.length ? parkType : undefined
                    }
                  })
                }}>
                {park}
              </Tag>
            ))}
            {nowParkLevel ? (
              <Tag
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => ({
                    ...prevState,
                    parkLevel: undefined
                  }))
                }}>
                {nowParkLevel}
              </Tag>
            ) : null}
            {nowHsIndustrys?.map((item) => (
              <Tag
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => {
                    const hsIndCode = prevState['hsIndCode']?.filter((it) => it !== item) ?? undefined
                    return {
                      ...prevState,
                      hsIndCode: hsIndCode?.length ? hsIndCode : undefined
                    }
                  })
                }}>
                {allHsIndustry.find((it) => it.value === item)?.label}
              </Tag>
            ))}
            {nowCompanyCount ? (
              <Tag
                closeIcon
                className="rounded-3"
                onClose={() => {
                  setFields((prevState) => ({
                    ...prevState,
                    companyCnt: undefined
                  }))
                }}>
                {nowCompanyCount}
              </Tag>
            ) : null}
          </div>
          <div className={more['province'] ? '' : 'h-40px'}>
            <span className="choice-title">省份地区</span>
            <Select
              placeholder="省份"
              style={{ minWidth: '120px' }}
              value={fields.cantonCode?.[0]?.split(',')[0]}
              allowClear
              options={levelThreeData.map((ele) => ({ label: ele.title, value: ele.key }))}
              onChange={(value) => {
                if (!value) {
                  setFields((prevState) => ({
                    ...prevState,
                    cantonCode: undefined
                  }))
                  return
                }
                setFields((prevState) => {
                  let cantonCode = prevState['cantonCode']
                  if (cantonCode) {
                    if (cantonCode.includes(String(value))) cantonCode = undefined
                    else cantonCode = [String(value)]
                  } else {
                    cantonCode = [String(value)]
                  }
                  return {
                    ...prevState,
                    cantonCode: cantonCode
                  }
                })
              }}
            />
            {allCity?.length && (
              <Select
                placeholder="城市"
                style={{ minWidth: '120px' }}
                value={fields.cantonCode?.[0]?.split(',')[1]}
                allowClear
                options={allCity.map((ele) => ({ label: ele.title, value: ele.key }))}
                onChange={(value) => {
                  if (!value) {
                    setFields((prevState) => ({
                      ...prevState,
                      cantonCode: [province]
                    }))
                    return
                  }
                  setFields((prevState) => {
                    const theCode = `${province},${value}`
                    let cantonCode = prevState['cantonCode']
                    if (cantonCode) {
                      if (cantonCode.includes(theCode)) cantonCode = [province]
                      else cantonCode = [theCode]
                    } else {
                      cantonCode = [theCode]
                    }
                    return {
                      ...prevState,
                      cantonCode: cantonCode
                    }
                  })
                }}
              />
            )}
            {allArea?.length && (
              <Select
                placeholder="区县"
                style={{ minWidth: '120px' }}
                value={fields.cantonCode?.[0]?.split(',')[2]}
                allowClear
                options={allArea.map((ele) => ({ label: ele.title, value: ele.key }))}
                onChange={(value) => {
                  if (!value) {
                    setFields((prevState) => ({
                      ...prevState,
                      cantonCode: [parentCantonCodeForLevelArea]
                    }))
                    return
                  }
                  setFields((prevState) => {
                    const theCode = `${parentCantonCodeForLevelArea},${value}`
                    let cantonCode = prevState['cantonCode']
                    if (cantonCode) {
                      if (cantonCode.includes(theCode)) cantonCode = [parentCantonCodeForLevelArea]
                      else cantonCode = [theCode]
                    } else {
                      cantonCode = [theCode]
                    }
                    return {
                      ...prevState,
                      cantonCode: cantonCode
                    }
                  })
                }}
              />
            )}
          </div>
          {/* <div className={more['province'] ? '' : 'h-40px'}>
            <span className="choice-title">省份</span>
            <span
              className={`choice-item ${!levelThreeData.map((it) => it.key).includes(String(province)) ? 'active' : ''}`}
              onClick={() => {
                setFields((prevState) => ({
                  ...prevState,
                  cantonCode: undefined
                }))
              }}>
              全部
            </span>
            {levelThreeData.map((item) => (
              <span
                key={item.key}
                className={`choice-item ${province === String(item.key) ? 'active' : ''}`}
                onClick={() => {
                  setFields((prevState) => {
                    let cantonCode = prevState['cantonCode']
                    if (cantonCode) {
                      if (cantonCode.includes(String(item.key))) cantonCode = undefined
                      else cantonCode = [String(item.key)]
                    } else {
                      cantonCode = [String(item.key)]
                    }
                    return {
                      ...prevState,
                      cantonCode: cantonCode
                    }
                  })
                }}>
                {item.title}
              </span>
            ))}
            <div className={`more-icon ${more['province'] ? 'active' : ''}`}>
              <Icon
                component={ArrowDown}
                className="size-4 text-#999999"
                onClick={() => {
                  setMore((prevState) => ({
                    ...prevState,
                    province: !prevState['province']
                  }))
                }}
              />
            </div>
          </div>
          {allCity?.length ? (
            <div className={more['city'] ? '' : 'h-40px'}>
              <span className="choice-title">城市</span>
              <span
                className={`choice-item ${!allCity.map((it) => it.key).includes(String(city)) ? 'active' : ''}`}
                onClick={() => {
                  setFields((prevState) => ({
                    ...prevState,
                    cantonCode: [province]
                  }))
                }}>
                全部
              </span>
              {allCity.map((item) => (
                <span
                  key={item.key}
                  className={`choice-item ${city === String(item.key) ? 'active' : ''}`}
                  onClick={() => {
                    setFields((prevState) => {
                      const theCode = `${province},${item.key}`
                      let cantonCode = prevState['cantonCode']
                      if (cantonCode) {
                        if (cantonCode.includes(theCode)) cantonCode = [province]
                        else cantonCode = [theCode]
                      } else {
                        cantonCode = [theCode]
                      }
                      return {
                        ...prevState,
                        cantonCode: cantonCode
                      }
                    })
                  }}>
                  {item.title}
                </span>
              ))}
              <div className={`more-icon ${more['city'] ? 'active' : ''}`}>
                <Icon
                  component={ArrowDown}
                  className="size-4 text-#999999"
                  onClick={() => {
                    setMore((prevState) => ({
                      ...prevState,
                      city: !prevState['city']
                    }))
                  }}
                />
              </div>
            </div>
          ) : null}
          {allArea?.length ? (
            <div className={more['area'] ? '' : 'h-40px'}>
              <span className="choice-title">区县</span>
              <span
                className={`choice-item ${!allArea.map((it) => it.key).includes(String(area)) ? 'active' : ''}`}
                onClick={() => {
                  setFields((prevState) => ({
                    ...prevState,
                    cantonCode: [parentCantonCodeForLevelArea]
                  }))
                }}>
                全部
              </span>
              {allArea.map((item) => (
                <span
                  key={item.key}
                  className={`choice-item ${area === String(item.key) ? 'active' : ''}`}
                  onClick={() => {
                    setFields((prevState) => {
                      const theCode = `${parentCantonCodeForLevelArea},${item.key}`

                      let cantonCode = prevState['cantonCode']
                      if (cantonCode) {
                        if (cantonCode.includes(theCode)) cantonCode = [parentCantonCodeForLevelArea]
                        else cantonCode = [theCode]
                      } else {
                        cantonCode = [theCode]
                      }
                      return {
                        ...prevState,
                        cantonCode: cantonCode
                      }
                    })
                  }}>
                  {item.title}
                </span>
              ))}
              <div className={`more-icon ${more['area'] ? 'active' : ''}`}>
                <Icon
                  component={ArrowDown}
                  className="size-4 text-#999999"
                  onClick={() => {
                    setMore((prevState) => ({
                      ...prevState,
                      area: !prevState['area']
                    }))
                  }}
                />
              </div>
            </div>
          ) : null} */}
          <div className={`${more['parkType'] ? '' : 'h-40px'} flex`}>
            <span className="choice-title">园区类型</span>
            <Checkbox
              indeterminate={fields.parkType?.length > 0 && fields.parkType?.length < allParkTypes.length}
              checked={fields.parkType?.length === allParkTypes.length}
              onChange={(e) => {
                setFields((prevState) => ({
                  ...prevState,
                  parkType: e.target.checked ? allParkTypes : undefined
                }))
              }}>
              全选
            </Checkbox>
            {allParkTypes.map((item) => (
              <Checkbox
                key={item}
                value={item}
                checked={fields.parkType?.includes(item)}
                onChange={() => {
                  setFields((prevState) => {
                    let parkType = prevState['parkType']
                    if (parkType) {
                      if (parkType.includes(item)) {
                        parkType = parkType.filter((it) => it !== item)
                      } else {
                        parkType = [...parkType, item]
                      }
                    } else {
                      parkType = [item]
                    }
                    return {
                      ...prevState,
                      parkType: parkType
                    }
                  })
                }}>
                {item}
              </Checkbox>
            ))}
            {/* <span
              className={`choice-item ${nowParkTypes?.length ? '' : 'active'}`}
              onClick={() => {
                setFields((prevState) => ({
                  ...prevState,
                  parkType: undefined
                }))
              }}>
              全部
            </span>
            {allParkTypes.map((item) => (
              <span
                key={item}
                className={`choice-item ${nowParkTypes?.includes(item) ? 'active' : ''}`}
                onClick={() => {
                  setFields((prevState) => {
                    let parkType = prevState['parkType']
                    if (parkType) {
                      if (parkType.includes(item)) {
                        parkType = parkType.filter((it) => it !== item)
                      } else {
                        parkType = [...parkType, item]
                      }
                    } else {
                      parkType = [item]
                    }
                    return {
                      ...prevState,
                      parkType: parkType
                    }
                  })
                }}>
                {item}
              </span>
            ))} */}
            <div className={`more-icon ${more['parkType'] ? 'active' : ''}`}>
              <span
                className="text-#ff7b20"
                onClick={() => {
                  setMore((prevState) => ({
                    ...prevState,
                    parkType: !prevState['parkType']
                  }))
                }}>
                {more['parkType'] ? '收起' : '展开'}
              </span>
              {/* <Icon
                component={ArrowDown}
                className="size-4 text-#999999"
                onClick={() => {
                  setMore((prevState) => ({
                    ...prevState,
                    parkType: !prevState['parkType']
                  }))
                }}
              /> */}
            </div>
          </div>
          {showAllFilter && (
            <>
              <div>
                <span className="choice-title">园区级别</span>
                <span
                  className={`choice-item ${nowParkLevel ? '' : 'active'}`}
                  onClick={() => {
                    setFields((prevState) => ({
                      ...prevState,
                      parkLevel: undefined
                    }))
                  }}>
                  全部
                </span>
                {allParkLevels.map((item) => (
                  <span
                    key={item}
                    className={`choice-item ${nowParkLevel === item ? 'active' : ''}`}
                    onClick={() => {
                      setFields((prevState) => {
                        let parkLevel = prevState['parkLevel']
                        if (parkLevel) {
                          if (parkLevel === item) {
                            parkLevel = undefined
                          } else {
                            parkLevel = item
                          }
                        } else {
                          parkLevel = item
                        }
                        return {
                          ...prevState,
                          parkLevel: parkLevel
                        }
                      })
                    }}>
                    {item}
                  </span>
                ))}
              </div>
              <div>
                <span className="choice-title">火石产业范围</span>
                <span
                  className={`choice-item ${nowHsIndustrys?.length ? '' : 'active'}`}
                  onClick={() => {
                    setFields((prevState) => ({
                      ...prevState,
                      hsIndCode: undefined
                    }))
                  }}>
                  全部
                </span>
                {hsIndustrys.map((item) => (
                  <span
                    key={item.name}
                    className={`choice-item ${activeHsIndustry === item.name ? 'active-bo' : ''}`}
                    onClick={() => {
                      setActiveHsIndustry((prevState) => {
                        if (prevState === item.name) return ''
                        else return item.name
                      })
                    }}>
                    {item.name}
                  </span>
                ))}
              </div>
              {activeHsIndustry &&
                hsIndustrys
                  .find((it) => it.name === activeHsIndustry)
                  ?.children.map((item) => (
                    <Checkbox
                      key={item.value}
                      value={item.value}
                      checked={fields.hsIndCode?.includes(item.value)}
                      onChange={() => {
                        setFields((prevState) => {
                          let hsIndCode = prevState['hsIndCode']
                          if (hsIndCode) {
                            if (hsIndCode?.includes(item.value)) {
                              hsIndCode = hsIndCode.filter((it) => it !== item.value)
                            } else {
                              hsIndCode.push(item.value)
                            }
                          } else {
                            hsIndCode = [item.value]
                          }
                          return {
                            ...prevState,
                            hsIndCode: hsIndCode
                          }
                        })
                      }}>
                      {item.label}
                    </Checkbox>
                  ))}
              {/* {activeHsIndustry && (
                <div>
                  {hsIndustrys
                    .find((it) => it.name === activeHsIndustry)
                    ?.children.map((item) => (
                      <span
                        key={item.value}
                        className={`choice-item ${nowHsIndustrys?.includes(item.value) ? 'active' : ''}`}
                        onClick={() => {
                          setFields((prevState) => {
                            let hsIndCode = prevState['hsIndCode']
                            if (hsIndCode) {
                              if (hsIndCode?.includes(item.value)) {
                                hsIndCode = hsIndCode.filter((it) => it !== item.value)
                              } else {
                                hsIndCode.push(item.value)
                              }
                            } else {
                              hsIndCode = [item.value]
                            }
                            return {
                              ...prevState,
                              hsIndCode: hsIndCode
                            }
                          })
                        }}>
                        {item.label}
                      </span>
                    ))}
                </div>
              )} */}
              <div>
                <span className="choice-title">企业数量</span>
                <span
                  className={`choice-item ${nowCompanyCount ? '' : 'active'}`}
                  onClick={() => {
                    setFields((prevState) => ({
                      ...prevState,
                      companyCnt: undefined
                    }))
                  }}>
                  全部
                </span>
                {allCompanyCounts.map((item) => (
                  <span
                    key={item}
                    className={`choice-item ${nowCompanyCount === item ? 'active' : ''}`}
                    onClick={() => {
                      setFields((prevState) => {
                        let companyCnt = prevState['companyCnt']
                        if (companyCnt) {
                          if (companyCnt === item) {
                            companyCnt = undefined
                          } else {
                            companyCnt = item
                          }
                        } else {
                          companyCnt = item
                        }
                        return {
                          ...prevState,
                          companyCnt: companyCnt
                        }
                      })
                    }}>
                    {item}
                  </span>
                ))}
              </div>
            </>
          )}
          <div className="flex items-center justify-center text-#ff7b20 pt-16px">
            <span
              className="flex items-center justify-center gap-4px cursor-pointer"
              onClick={() => {
                setShowAllFilter((prevState) => !prevState)
              }}>
              {showAllFilter ? '收起' : '展开'}筛选
              {showAllFilter ? (
                <img src={arrowDownImg} alt="arrowDownImg" className="w-14px h-14px rotate-180" />
              ) : (
                <img src={arrowDownImg} alt="arrowDownImg" className="w-14px h-14px" />
              )}
            </span>
          </div>
        </div>
      </div>
      <div className="park-results-wrapper">
        <div className="park-count">
          <div className="left-text">
            共有符合条件的园区
            <span className="text-#FF7B20">{pagination.total}</span>家
          </div>
          <div className="flex gap-8px items-center">
            <Button
              type="link"
              disabled={loading || pagination.current === 1}
              className="flex items-center text-#FF7B20"
              onClick={() => {
                pagination.onChange(pagination.current - 1)
              }}>
              <LeftOutlined />
              上一页
            </Button>
            <span>
              {(pagination.current - 1) * pagination.pageSize + 1}-{pagination.current * pagination.pageSize}
            </span>
            <Button
              type="link"
              disabled={loading || pagination.current * pagination.pageSize >= pagination.total}
              className="flex items-center text-#FF7B20"
              onClick={() => {
                pagination.onChange(pagination.current + 1)
              }}>
              下一页 <RightOutlined />
            </Button>
          </div>
        </div>
        <div className="park-list">
          {data.map((it) => (
            <div key={it.id} className="park-card">
              <div
                className="park-thumb"
                onClick={() => {
                  navigate(`/parkDetail?code=${it.parkCode}`)
                }}>
                <img src={it.photoList?.[0]?.photourl ?? emptyParkImg} alt="empty" className="park-img" />
                <div className="location-img">
                  <img src={'/static/img/park/location.png'} alt="location" />
                  {it.province && `${it.province}-`}
                  {it.city}
                  {it.area && `-${it.area}`}
                </div>
              </div>

              <div className="park-content">
                <div className="flex items-center justify-between">
                  <span
                    className="cursor-pointer font-bold"
                    onClick={() => {
                      navigate(`/parkDetail?code=${it.parkCode}`)
                    }}>
                    {it.parkName}
                  </span>
                  <div className="park-img-count">
                    <img src={cardRightTop} alt="park count" />
                    <p>
                      关联企业: <span className="text-#FF7B20"> {it.companyCnt} </span>家
                    </p>
                  </div>
                </div>
                <div>
                  <span className={it.parkLevel ? '' : 'hidden'}>{it.parkLevel}</span>
                  <span>{it.parkType}</span>
                  {it.leadingIndustry?.split(',').map((it) => <span key={it}>{it}</span>)}
                </div>
                <div className="flex-1">
                  <div className="grid grid-cols-[1fr_auto] items-center overflow-hidden">
                    <div className="grid grid-cols-[auto_1fr] overflow-hidden flex items-baseline">
                      <span className="text-#666">园区地址：</span>
                      <Paragraph
                        className="leading-7 text-#262626"
                        ellipsis={{
                          rows: 1,
                          tooltip: true
                        }}>
                        {it.address}
                      </Paragraph>
                    </div>
                  </div>
                  <div className="grid grid-cols-[auto_1fr] overflow-hidden flex items-baseline">
                    <span className="text-#666">园区简介：</span>
                    <Paragraph
                      className="leading-7 text-#262626 flex-1"
                      ellipsis={{
                        rows: 1,
                        tooltip: {
                          placement: 'topLeft'
                        }
                      }}>
                      {it.describer}
                    </Paragraph>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default ParkHome
